@charset "utf-8";
/* reset */
* { margin: 0; padding: 0; outline: none; }
a img, fieldset, table {  border: 0; }
body { line-height: 1; font-size: 88%; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; padding: 0; }
ul, ol { list-style: none; }
a { color: black; text-decoration: none; }
a:hover { text-decoration: underline; }
.clear { clear:both; width:0; height:0; font-size:0; overflow:hidden; }
/* end of reset */ 

/* start layout */
.fl { float: left; display: inline }
.fr { float: right; display: inline }
.fl img, .fr img, #logo img { float: left }
b { display: none }
.cont { clear: both; margin: 0 auto; }

/* main contact widget */
#contact { width: 605px; height: 285px; overflow: hidden; background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/contactBg.png) no-repeat }
#contact .content { width: 583px; height: 197px; background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/contactContent.png) no-repeat; margin: 0 auto; clear: both}
#contact h1 { font: bold 18px/18px Arial, sans-serif; color: #003366; padding: 20px 0 5px 18px }
#contact select { width: 129px }

/* rows */
#contact dl { float: left; display: inline }
#contact dt { font: bold 14px/27px Arial, sans-serif; color: #fff; padding-left: 10px; margin-bottom: 3px  }
#contact dd { height: 31px; font: normal 14px/31px Arial, sans-serif; background: #f1f6fa; margin-bottom: 2px; padding-left: 10px }
#contact dd.alt { background: #dce1e4 }
#contact dl.c1 { width: 203px; margin: 7px 0 0 7px }
#contact dl.c1 dt { background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/c1.png) no-repeat; height: 27px }
#contact dl.c2 { width: 202px; margin: 7px 0 0 2px }
#contact dl.c2 dt { background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/c2.png) no-repeat; height: 27px }
#contact dl.c3 { width: 160px; margin: 7px 0 0 2px  }
#contact dl.c3 dt { background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/c3.png) no-repeat; height: 27px }
#contact dl.c3 dd { padding-left: 6px }
#contact dl.c3 a:hover { background-position: 0 -29px; text-decoration: none }

/* buttons */
.btn1 { float: left; display: inline; height: 29px; background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/btn1.png) no-repeat; width: 97px; text-align: center; font: bold 11px/31px Arial, sans-serif; text-transform: uppercase; color: #444 }
.btn2 { float: left; display: inline; height: 29px; background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/btn2.png) no-repeat; width: 50px; text-align: center; font: bold 11px/31px Arial, sans-serif; text-transform: uppercase; color: #444 }

/* pageination */
#contact h3 { font: normal 14px/16px Arial, sans-serif; color: #444; margin: 3px 0 0 15px; width: 350px; }
#contact a.next { font: bold 14px/16px Arial, sans-serif; color: #336699; padding-right: 15px; background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/next.png) right 5px no-repeat; text-decoration: none; margin: 3px 15px 0 0 }
#contact a.previous { font: bold 14px/16px Arial, sans-serif; color: #336699; padding-left: 15px; background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/previous.png) left 5px no-repeat; text-decoration: none; margin: 3px 15px 0 0 }

/* config button */
.config { background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/config.png) no-repeat; width: 106px; height: 34px; font: bold 14px/34px Arial, sans-serif; color: #336699; padding-left: 23px; margin-left: 12px }
a.config:hover { background-position: 0 -34px; text-decoration: none; color: #fff }
h2#logo, h2#logo2 { width: 86px; height: 23px; background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/logo.png) no-repeat; margin: 8px 25px 0 0 }

/* dropdown */
#contactSource { position: relative; margin: 10px 11px 0 0; z-index: 9 }
#contactSource a { background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/choices.png) no-repeat; width: 131px; height: 32px; display: block; font: bold 14px/35px Arial, sans-serif; text-indent: 15px; color: #336699; text-decoration: none  }
#contactSource a.active { background-position: 0 -35px }
#contactSource .hidden { display: none; position: absolute; top: 32px; left: 0 }
#contactSource .hidden a { width: 131px; height: 29px; background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/choicesB.png) no-repeat; overflow: hidden; line-height: 29px }
#contactSource .hidden a:hover { background-position: center -29px; color: #fff }
#contactSource .hidden a.last { background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/choicesBottom.png) no-repeat; width: 131px; height: 32px; display: block; font: bold 14px/28px Arial, sans-serif; text-indent: 15px; color: #336699; text-decoration: none }
#contactSource .hidden a.last:hover { background-position: 0 -32px; color: #fff }

.inner2 { display: none }

#contact .inner2 h4 { font: bold 14px/17px Arial, sans-serif; background: url(../images/configicon.png) left center no-repeat; padding-left: 20px; margin: 19px 20px 0 0; color: #336699 }
#contact .inner2 h5 { height: 34px; font: bold 14px/34px Arial, sans-serif; border-bottom: 1px solid #036; margin: 5px 16px 5px }
#contact .inner2 .content { overflow: hidden }

/* account info */
#accoutnFields { width: 305px; margin-left: 17px }
#accountform p { float: left; height: 36px}
#accountform p.account { height: 40px }
#accountform label { font: bold 14px/29px Arial, sans-serif; color: #369; float: left; display: inline; width: 90px }
#accountform label.account { width: 86px; line-height: 37px }
#accountform input { float: left; display: inline; font: normal 14px/12px Arial, sans-serif; padding: 6px; background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/input.png) no-repeat; border: 0; width: 168px }
#accountform input#submit { background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/submit.png) no-repeat; width: 89px; height: 28px; cursor: pointer; margin-left: 90px; outline: none }
#accountDesc blockquote { width: 247px; background: #f8f8f8 url(../images/statusBottom.jpg) bottom left no-repeat; padding: 0 0 12px }
#accountDesc blockquote h6 { font: bold 14px/34px Arial, sans-serif; color: #369; background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/statusTop.jpg) top left no-repeat; padding-left: 12px }
#accountDesc blockquote p { font: normal 12px/16px Arial, sans-serif; color: #369; padding: 0 12px }

/* dropdown2 */
#contactSource2 { position: relative; }
#contactSource2 a { background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/choices.png) no-repeat; width: 131px; height: 32px; display: block; font: bold 14px/35px Arial, sans-serif; text-indent: 15px; color: #336699; text-decoration: none  }
#contactSource2 a.active { background-position: 0 -35px }
#contactSource2 .hidden { display: none; position: absolute; top: 32px; left: 0 }
#contactSource2 .hidden a { width: 131px; height: 29px; background: url(../images/choicesB.png) no-repeat; overflow: hidden; line-height: 29px; padding: 0 }
#contactSource2 .hidden a:hover { background-position: 0 -29px; color: #fff; }
#contactSource2 .hidden a.last { background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/choicesBottom.png) no-repeat; width: 131px; height: 32px; display: block; font: bold 14px/28px Arial, sans-serif; text-indent: 15px; color: #336699; text-decoration: none }
#contactSource2 .hidden a.last:hover { background-position: 0 -32px; color: #fff }

.return { background: url(http://code.google.com/p/tccontactgadget/source/browse/trunk/images/returnMain.png) no-repeat; width: 139px; height: 34px; font: bold 14px/34px Arial, sans-serif; color: #336699; padding-left: 24px; margin: 0 0 0 12px }
a.return:hover { background-position: 0 -34px; text-decoration: none; color: #fff }

/* title heading optional */
h1.heading { font: bold 24px/42px Arial, sans-serif; height: 42px; text-align: center }